<template>

  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :title="'文章列表'" :border="3" :marginHeight="192" :isDetail="true" :detailTitle="'新增文章'"
                    @clickA="addOrEdit(null,'add')">
          <template #center>
            <slot name="center">
              <ZTable
                  class="complexTable"
                  :tableData="tableData"
                  :tableDataHeader="tableDataHeader"
                  @deleteRow="deleteRow"
                  @editRow="edit"
                  @detailRow="detail"
                  @TSelected="Select"
              >
              </ZTable>
            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>

  <el-dialog class="Z" v-model="dialogFormVisible" :title="formTitle">
    <el-form :model="form">
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.date" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="作者" :label-width="formLabelWidth">
        <el-input v-model="form.type" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="阅读量" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
      <!--      <el-form-item label="Zones" :label-width="formLabelWidth">-->
      <!--        <el-select v-model="form.region" placeholder="Please select a zone">-->
      <!--          <el-option label="Zone No.1" value="shanghai"/>-->
      <!--          <el-option label="Zone No.2" value="beijing"/>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save"
        >保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import {reactive, ref, type Ref} from 'vue'
import ZTable from '@/views/components/table/ZTable/index.vue'
import {data} from './data.ts'

import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";


const tableData: Ref<Array> = ref(data.tableData)
const tableDataHeader = ref(data.tableDataHeader)
const deleteRow = (row: any, index: number) => {
  tableData.value.splice(index, 1)
  console.log('this tableData: ', tableData)
  // pagenation.value.total = tableData.value.length
}
const edit = (row, index) => {
  console.log('row: ', row, index)
  addOrEdit(row)
  console.log(form)
}
const detail = (row, index) => {
  console.log('row: ', row, index)
}

/*
表格新增编辑操作
* */
const resetState = (state) => {
  for (const key in state) {
    if (state.hasOwnProperty(key)) {
      state[key] = null;
    }
  }
}

const Select = (val) => {
  console.log(val, 1)
}

const dialogFormVisible = ref(false)
const formTitle = ref('新增')

const formLabelWidth = '140px'

const form = reactive({
  name: '',
  date: '',
  type: '',
})

const addOrEdit = (row = null, str = '') => {
  if (str === 'add') {
    formTitle.value = '新增'
    resetState(form)
  } else {
    formTitle.value = '编辑'
    Object.assign(form, row)
  }
  dialogFormVisible.value = true
}

const save = () => {
  console.log(form)
  dialogFormVisible.value = true
}
</script>
<style scoped lang="scss">

.complexTable {
  height: calc(100% - 30px);
  //padding-bottom: 30px;
}
</style>
